<template>
  <div class="container">
    <head>
      <meta name="referrer" content="no-referrer" />
    </head>
    <el-card>
      <div class="btn_wrapper">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="$router.push('new')"
          >新增试题</el-button
        >
      </div>
      <el-form ref="questionForm" :model="requestParameters" label-width="80px">
        <el-form-item label="学科" prop="subjectID">
          <el-select
            v-model="requestParameters.subjectID"
            placeholder="请选择"
            @change="onChange(requestParameters.subjectID)"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录" prop="catalogID">
          <el-select v-model="requestParameters.catalogID" placeholder="请选择">
            <el-option
              v-for="item in catalogList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-select placeholder="请选择" v-model="requestParameters.tags">
            <el-option
              v-for="item in tagsList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字" prop="keyword">
          <el-input
            v-model="requestParameters.keyword"
            placeholder="根据题干搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="试题类型" prop="questionType">
          <el-select
            v-model="requestParameters.questionType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in questionType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-select
            v-model="requestParameters.difficulty"
            placeholder="请选择"
          >
            <el-option
              v-for="item in difficulty"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="requestParameters.direction" placeholder="请选择">
            <el-option
              v-for="item in direction"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人" prop="creatorID">
          <el-select v-model="requestParameters.creatorID" placeholder="请选择">
            <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注" prop="remarks">
          <el-input v-model="requestParameters.remarks"></el-input>
        </el-form-item>
        <el-form-item label="企业简称" prop="shortName">
          <el-input v-model="requestParameters.shortName"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-select
            v-model="requestParameters.province"
            style="width: 48%;margin-right: 2%;"
            placeholder="请选择"
            @change="handleProvince"
          >
            <el-option
              v-for="item in citySelect.province"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            v-model="requestParameters.city"
            style="width: 48%;margin-right: 2%;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in citySelect.cityDate"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button size="small" @click="resetForm('questionForm')"
            >清除</el-button
          >
          <el-button type="primary" size="small" @click="onSearch"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <el-alert type="info" show-icon :closable="false">
        <template slot="title">
          数据一共 {{ total }} 条
        </template>
      </el-alert>
      <el-table :data="questionList" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="80">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="80">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <template v-slot="{ row }">
            {{ row.questionType | questionTypeFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="280">
          <template v-slot="{ row }">
            {{ row.question | html2Text }}
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="80">
          <template v-slot="{ row }">
            {{ row.difficulty | difficultyFilter }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="80">
        </el-table-column>
        <el-table-column prop="address" label="操作" width="180">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              icon="el-icon-view"
              circle
              size="small"
              plain
              title="预览"
              @click="onShow(row.id)"
            ></el-button>
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              size="small"
              plain
              title="修改"
              @click="$router.push({ path: 'new', query: { id: row.id } })"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="small"
              plain
              title="删除"
              @click="onDel(row.id)"
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-check"
              circle
              size="small"
              plain
              title="加入精选"
              @click="onJoin(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="5"
        background
        layout="prev, pager, next,sizes, jumper"
        :total="total"
        style="margin-top: 20px;text-align: right;"
      >
      </el-pagination>
    </el-card>

    <!-- 预览对话框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="showDialog"
      width="900px"
      @close="videoClose"
    >
      <el-row>
        <el-col :span="6"
          >【题型】：{{ questionType1(questionDetail.questionType) }}</el-col
        >
        <el-col :span="6">【编号】：{{ questionDetail.id }}</el-col>
        <el-col :span="6"
          >【难度】：{{ difficulty1(questionDetail.difficulty) }}</el-col
        >
        <el-col :span="6">【标签】：{{ questionDetail.tags }}</el-col>
        <el-col :span="6">【学科】：{{ questionDetail.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ questionDetail.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ questionDetail.direction }}</el-col>
      </el-row>
      <hr />
      【题干】：
      <div style="color: blue;">
        <p>{{ questionDetail.question | html2Text }}</p>
      </div>
      <div>
        <template v-if="questionDetail.questionType == 1">
          <div
            v-for="item in questionDetail.options"
            :key="item.id"
            style="padding: 8px 0px;"
          >
            <el-radio
              v-model="radio1"
              :disabled="item.isRight == 0"
              :label="item.isRight"
              >{{ item.title }}</el-radio
            >
          </div>
        </template>
        <template v-if="questionDetail.questionType == 2">
          <div
            v-for="item in questionDetail.options"
            :key="item.id"
            style="padding: 8px 0px;"
          >
            <el-checkbox
              :v-model="item.isRight == checkList"
              :disabled="item.isRight == 0"
              :checked="item.isRight == '1'"
              >{{ item.title }}</el-checkbox
            >
          </div>
        </template>
        <div></div>
      </div>
      <hr />
      【参考答案】：<el-button type="danger" size="small" @click="onPlay"
        >视频答案预览</el-button
      >
      <div class="video" v-show="videoShow">
        <video
          ref="videoRef"
          :src="questionDetail.videoURL"
          autoplay
          controls
          muted
          height="100%"
          width="100%"
        ></video>
      </div>
      <hr />
      【答案解析】：{{ questionDetail.answer | html2Text }}
      <hr />
      【题目备注】：{{ questionDetail.remarks }}
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showDialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as subjects from "@/api/hmmm/subjects";
import * as users from "@/api/base/users";
import * as questions from "@/api/hmmm/questions";
import * as directorys from "@/api/hmmm/directorys";
import * as tags from "@/api/hmmm/tags";
import { questionType, difficulty, direction } from "@/api/hmmm/constants.js";
import { provinces, citys } from "@/api/hmmm/citys.js";

export default {
  data() {
    return {
      // form: {
      //   subjectID: "", // 学科
      //   difficulty: "", // 难度
      //   questionType: "", // 试题类型
      //   tags: "", // 标签
      //   keyword: "", // 关键字
      //   remarks: "", // 备注
      //   shortName: "", // 企业简称
      //   province: "", // 市
      //   city: "", // 区
      //   direction: "", // 方向
      //   creatorID: "", // 录入人
      //   catalogID: "" // 二级目录
      // },
      userList: [],
      direction: [],
      questionType: [],
      difficulty: [],
      subjectList: [],
      catalogList: [],
      tagsList: [],
      questionList: [],
      questionDetail: {},
      total: null,
      showDialog: false,
      citySelect: {
        province: [],
        cityDate: []
      },
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      radio1: 1,
      checkList: 1,
      videoShow: false
    };
  },
  methods: {
    async getQuestionList(data) {
      const res = await questions.list(data);
      this.total = res.data.counts;
      this.questionList = res.data.items;
    },
    onSearch() {
      this.requestParameters.page = 1;
      this.getQuestionList(this.requestParameters);
    },
    // 学科列表
    async onChange(subjectName) {
      let subItem = this.subjectList.find(item => {
        return item.value == subjectName;
      });
      const res = await directorys.simple({
        subjectID: subItem.value
      });
      const res1 = await tags.simple({
        subjectID: subItem.value
      });
      this.catalogList = res.data;
      this.tagsList = res1.data;
      console.log(res1);
      console.log(res);
    },
    handleSizeChange(val) {
      this.requestParameters.pagesize = val;
      this.getQuestionList(this.requestParameters);
    },
    handleCurrentChange(val) {
      this.requestParameters.page = val;
      this.getQuestionList(this.requestParameters);
    },
    // 表单重置
    resetForm() {
      this.$refs.questionForm.resetFields();
    },
    async onShow(id) {
      this.showDialog = true;
      const res = await questions.detail({ id: id });
      this.questionDetail = res.data;
      console.log(res);
    },
    onPlay() {
      this.videoShow = true;
      this.$refs.videoRef.load(); // 重新加载视频元素
      this.$refs.videoRef.play; // 开始播放视频
    },
    videoClose() {
      this.videoShow = false;
      this.$refs.videoRef.pause(); // 暂停当前播放的视频
    },
    onDel(id) {
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await questions.remove({ id });
          this.getQuestionList(this.requestParameters);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    onJoin(id) {
      this.$confirm("此操作将该题目加入精选, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      })
        .then(async () => {
          await questions.choiceAdd({ id, choiceState: 1 });
          this.getQuestionList(this.requestParameters);
          this.$message({
            type: "success",
            message: "加入精选成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消加入"
          });
        });
    },
    // 获取省
    getCityData: function() {
      this.citySelect.province = provinces();
    },
    // 选省获取到市
    handleProvince: function(e) {
      this.citySelect.cityDate = citys(e);
    },
    difficulty1(id) {
      if (id == 1) {
        return "简单";
      } else if (id == 2) {
        return "一般";
      } else {
        return "困难";
      }
    },
    questionType1(id) {
      if (id == 1) {
        return "单选";
      } else if (id == 2) {
        return "多选";
      } else {
        return "简答";
      }
    }
  },
  async created() {
    const res = await subjects.simple();
    this.subjectList = res.data;
    const res1 = await users.simple();
    this.userList = res1.data;
    console.log(res);
    console.log(res1);
    this.getQuestionList(this.requestParameters);
    this.direction = direction;
    this.questionType = questionType;
    this.difficulty = difficulty;
    this.getCityData();
  },
  filters: {
    questionTypeFilter: val => {
      let f = questionType.filter(item => item.value == val);
      return f[0].label;
    },
    difficultyFilter(val) {
      let d = difficulty.filter(item => item.value == val);
      return d[0].label;
    }
  }
};
</script>

<style scoped lang='less'>
.container {
  padding: 0 10px;
  margin: 10px 0;
  .btn_wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    span {
      font-size: 12px;
      color: pink;
    }
    .el-button {
      font-size: 12px;
      padding: 9px 15px;
    }
  }
  ::v-deep .el-form {
    .el-form-item {
      float: left;
      width: 25%;
      margin-bottom: 18px;
      .el-input__inner {
        height: 32px;
        line-height: 32px;
        font-size: 13px;
      }
    }
  }
  .el-alert {
    margin-bottom: 15px;
  }
}
/deep/.el-dialog {
  .el-dialog__body {
    .el-row {
      .el-col {
        padding: 10px 0;
      }
    }
    .video {
      width: 400px;
      height: 300px;
    }
  }
  .el-dialog__footer {
    text-align: right;
  }
}
</style>
